<template>
  <el-dialog title="选择配置" :visible.sync="chooseSettingModalShow" :width="modalWidth">
    <el-row :gutter="20">
      <el-col :span="8" class="lable">
        请选择配置:
      </el-col>
      <el-col :span="14">
        <el-select placeholder="请选择配置" v-model="settingId">
          <el-option :value="setting.id" v-for="(setting,index) in settings" :key="index"
                     :label="setting.name"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="chooseSettingModalShow = false">取 消</el-button>
      <el-button type="primary" @click="loadSettingDetail">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "ChooseSettingModal",
    data() {
      return {
        settingId: ""
      };
    }, computed: {
      ...mapState(["modalWidth", "settings"]),
      chooseSettingModalShow: {
        get() {
          return this.$store.getters.chooseSettingModalShow;
        },
        set(flag) {
          this.$store.dispatch("chooseSettingModalShow", flag);
        }
      }
    }, methods: {
      loadSettingDetail() {
        this.$store.dispatch("loadSettingDetail", this.settingId);
        this.$store.dispatch("loadMappings", this.settingId);
        this.$store.dispatch("chooseSettingModalShow", false);
      }
    }
  }
</script>

<style scoped>
  .lable {
    padding: 10px;
    text-align: right;
  }
</style>
